// 角色列表
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {withRouter} from 'react-router-dom';
import PropTypes from 'prop-types';
import roleAction from '../../store/actions/roleList';
import jurisdictionAction from '../../store/actions/jurisdictionList';
import {Drawer, Button, Input, Form, Checkbox} from 'antd';
import {addRole, editRole} from '../../api';

import './Header.scss';
import Header from './RoleList';

const CheckboxGroup = Checkbox.Group;

class CodeHeader extends Component {
  state = {
    checkedList: []
  };
  static propTypes = {
    visible: PropTypes.bool,
    showDrawer: PropTypes.func,
    onClose: PropTypes.func
  };
  handleOk = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log(this.props);
        const {group_id} = this.props;
        const isEdit = group_id;

        if (typeof values.obj_ids !== 'string') {
          values.obj_ids = JSON.stringify(values.obj_ids);
        }

        if (isEdit) {
          // 编辑
          const postData = {
            group_id,
            ...values
          };
          console.log(postData);
          editRole(postData).then(res => {
            const {GET_ROLE_LIST} = this.props;
            GET_ROLE_LIST();
          }).catch(err => {
            console.log(err);
          });
        } else {
          // 增加
          addRole(values).then(res => {
            const {GET_ROLE_LIST} = this.props;
            GET_ROLE_LIST();
          }).catch(err => {
            console.log(err);
          });
        }

        this.props.onClose();
        this.props.form.resetFields();
      }
    });
  };
  // 解决没有操作的数据不刷新问题
  tempClose = () => {
    this.props.onClose();
    this.props.form.resetFields();
  };

  static getDerivedStateFromProps(props, state) {
    state.checkedList = props.obj_ids && JSON.parse(props.obj_ids);
  }

  componentDidMount() {
    this.props.GET_JURISDICTION_LIST();
  }

  render() {
    const {getFieldDecorator} = this.props.form;
    let {roleListData, jurisdictionList, showDrawer, onClose, group_name, obj_ids} = this.props;
    return (
      <>
        <div className='MaterialGroup__head'>
          <h3>角色列表</h3>
          <Button type="primary" onClick={showDrawer}> 增 加</Button>
        </div>
        {/*抽屉开始*/}
        <Drawer
          width={500}
          title="角色信息"
          placement="right"
          closable={true}
          onClose={this.tempClose}
          visible={this.props.visible}
        >

          <Form className="drawer-form" onSubmit={this.handleOk}>


            <Form.Item label="角色名称">
              {getFieldDecorator('group_name', {
                initialValue: group_name || '',
                rules: [{
                  required: true,
                  message: '请填写角色名称...'
                }]
              })(
                <Input placeholder='角色名称'/>
              )}
            </Form.Item>

            <Form.Item label="角色权限">
              {getFieldDecorator('obj_ids', {
                initialValue: this.state.checkedList || []
              })(
                <Checkbox.Group style={{width: '100%'}}>
                  {
                    jurisdictionList && jurisdictionList.map(item => (
                      <Checkbox
                        style={{padding: 0, margin: '10px 15px'}}
                        key={item.permission_id}
                        value={item.permission_id}
                      >
                        {item.title}
                      </Checkbox>
                    ))
                  }
                </Checkbox.Group>
              )}
            </Form.Item>


            <Form.Item>
              <div id='drawer-form-buttons'>
                <Button type="primary" className="drawer-form-button" onClick={this.tempClose}>取 消</Button>
                <Button type="danger" className="rawer-form-button" onClick={this.handleOk}>确 定</Button>
              </div>
            </Form.Item>

          </Form>
        </Drawer>
        {/*抽屉结束*/}
      </>
    );
  }

}

const mapStateToProps = state => {
  return {
    ...state.roleList,
    ...state.jurisdictionList
  };
};
const WrappedNormalLoginForm = Form.create()(CodeHeader);
export default connect(mapStateToProps, {...roleAction, ...jurisdictionAction})(withRouter(WrappedNormalLoginForm));
